<template>
	<div class="main" v-bind:style="{ 'width': mainWidth + 'px'}" id="poster" @click="closePrintingTips">
		<!-- v-bind:class="{ 'height': mainHeight + 'px' ,'width': mainWidth + 'px'}" -->
		<v-head ref="headerTips" @navbarClick="navbarClick" @timeChange="timeChange" @liClick='liClick' ></v-head>
		<router-view :month="month"/>
	</div>
</template>
<script>
import Lodash from 'lodash'
import html2canvas from 'html2canvas';
import vHead from './header'
import axios from 'axios'

export default {
	data () {
		return {
			depId: '',
			month: '',
			mainHeight: document.body.clientHeight,
			mainWidth: document.body.clientWidth
		}
	},
	components: {
		'v-head': vHead
	},
	methods: {
		navbarClick (type) {
			type === 'all' ? this.$router.push('/all') : type === 'department' ? this.$router.push('/section-service/2171') : this.$router.push('/person')
		},
		// getDepartment () {
  //         	var qs = require('qs');
  //         	var self = this
  //         	axios.post('/service', 
  //         		qs.stringify({"data": JSON.stringify({
  //             		command: 'getDepartment',
  //             		platform: 'web',
  //             		monthTime: self.month
  //            		})
  //         		}), {
  //             		headers: {
  //              			"BBG-Key": "ab9ef204-3253-49d4-b229-3cc2383480a6",
  //             		}
  //           }).then(function (rep) {
  //             	if (rep.data.statusCode === '10001') {
  //             	// console.log(rep.data.data.department)
  //          		self.depId = rep.data.data.department[0].id
  //          		sessionStorage.setItem('depName',rep.data.data.department[0].name)
  //          		sessionStorage.setItem('depId',rep.data.data.department[0].id)
  //         		}
  //        	}).catch(function (error) {
  //         		// console.log(error);
  //        	});
 	// 	},
		timeChange (month) {
			this.month = month
		},
		liClick(type) {
			var self = this
			var qs = require('qs')
			this.$refs.headerTips.closePrintingTips();
			if (type === 'JPG格式') {
				let content_html = document.getElementById('poster');　
				　　//要转化的div
				let width = content_html.offsetWidth;
				let height = content_html.offsetHeight;
				let offsetTop = content_html.offsetTop;
				let canvas = document.createElement("canvas");
				let context = canvas.getContext('2d');
				let scaleBy = Math.ceil(window.devicePixelRatio);
				canvas.width = width*scaleBy;
				canvas.height = (height+offsetTop)*scaleBy;
				context.scale(scaleBy,scaleBy);
				var opts = {
				  allowTaint:true,//允许加载跨域的图片
				  tainttest:true, //检测每张图片都已经加载完成
				  scale:scaleBy, // 添加的scale 参数
				  canvas:canvas, //自定义 canvas
				  logging: false, //日志开关，发布的时候记得改成false
				  width:width, //dom 原始宽度
				  height:height //dom 原始高度
				};
				html2canvas(content_html,opts).then(function (canvas) {
				  canvas.style.width = width+"px";
				  canvas.style.height = height+"px";
				  var image = new Image();
				  var imgUri = canvas.toDataURL("image/jpeg").replace("image/jpeg", "image/octet-stream"); // 获取生成的图片的url  
				  // console.log(imgUri)
	      			self.print(imgUri);
	    //   			let content_html = document.getElementById('poster');　　　　//要转化的div
					// let width = content_html.offsetWidth;
					// let height = content_html.offsetHeight;
	      			
				  });
			} else if (type === 'EXL格式') {
				axios.post('/service', 
	          		qs.stringify({"data": JSON.stringify({
	              		command: 'exportDataUpload',
	              		platform: 'web',
	              		monthTime: self.month,
	              		pageName: 1
	             		})
	          		}), {
	              		headers: {
	               			"BBG-Key": "ab9ef204-3253-49d4-b229-3cc2383480a6",
	              		}
	            }).then(function (rep) {
	              	if (rep.data.statusCode === '10001') {
	              		rep.data.data.filePath.forEach((url) => {
		              		let iframe = document.createElement('iframe')
	  						iframe.style.display = 'none'
							iframe.src = url
							iframe.onload = function () {
							  document.body.removeChild(iframe)
							}
							document.body.appendChild(iframe)	
	              		})
	          		}
	         	})
			} 
			
			 
		},
		print(baseUrl) {

			let img = document.createElement('img')
						img.src = baseUrl
						img.style.display = 'block'
						img.style.width = "100%"
						img.style.height = "100%"
						// img.style.background = 'red'
					let newDiv = document.createElement('div')
						newDiv.style.display = 'block'
						newDiv.style.width = '1300px'
						newDiv.style.height = '900px'
						newDiv.appendChild(img)
						// console.log(newDiv.innerHTML)


						setTimeout(() => {
							document.getElementById('poster').innerHTML = newDiv.innerHTML
									// var newStr = "<img src=\""+ imgUri+"\"/>"
									var form_print = document.getElementById('poster')
									form_print.style.width = '1300px'
									form_print.style.height = '900px'
							var newStr = form_print.innerHTML
							// var newStr = newDiv.innerHTML
							// console.log(newStr)
							var oldStr = document.body.innerHTML
							document.getElementById('poster').innerHTML = newStr
							console.log(document.body.innerHTML)
							window.print()
							window.location.reload()
							document.body.innerHTML = oldStr
							
						}, 10);
		},
		saveFile (data, filename){
			var save_link = document.createElementNS('http://www.w3.org/1999/xhtml', 'a');
			save_link.href = data;
			save_link.download = filename;
			var event = document.createEvent('MouseEvents');
			event.initMouseEvent('click', true, false, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null);
			save_link.dispatchEvent(event);
		},
		closePrintingTips(){
			this.$refs.headerTips.closePrintingTips();
		}
	},
	mounted () {
		var that = this
		window.onresize = _.debounce(() => {
			window.location.reload()
	        console.log("onresize:" + that.mainHeight)
	        console.log("onresize:" + that.mainWidth)
	        that.mainHeight = document.body.clientHeight
	        that.mainWidth = document.body.clientWidth
	      }, 400)
	}
}
</script>
<style lang="scss">
	.main {
		width: 100%;
		height: 100%;
	}
</style>